/**
 * 移动端触摸交互组件
 * 提供触摸手势支持、滑动操作、长按等功能
 * 
 * @author 项目开发团队
 * @version 1.0.0
 */

import React, { useRef, useEffect, useState, useCallback } from 'react';
import './index.module.css';

const MobileTouch = ({
  children,
  onSwipeLeft,
  onSwipeRight,
  onSwipeUp,
  onSwipeDown,
  onLongPress,
  onTap,
  onDoubleTap,
  swipeThreshold = 50,
  longPressDelay = 500,
  doubleTapDelay = 300,
  className = '',
  disabled = false,
  ...props
}) => {
  const elementRef = useRef(null);
  const touchStartRef = useRef(null);
  const touchEndRef = useRef(null);
  const longPressTimerRef = useRef(null);
  const lastTapRef = useRef(0);
  const [isPressed, setIsPressed] = useState(false);

  // 清理定时器
  const clearLongPressTimer = useCallback(() => {
    if (longPressTimerRef.current) {
      clearTimeout(longPressTimerRef.current);
      longPressTimerRef.current = null;
    }
  }, []);

  // 处理触摸开始
  const handleTouchStart = useCallback((e) => {
    if (disabled) return;
    
    const touch = e.touches[0];
    touchStartRef.current = {
      x: touch.clientX,
      y: touch.clientY,
      time: Date.now()
    };
    
    setIsPressed(true);
    
    // 开始长按计时
    if (onLongPress) {
      longPressTimerRef.current = setTimeout(() => {
        onLongPress(e);
        setIsPressed(false);
      }, longPressDelay);
    }
  }, [disabled, onLongPress, longPressDelay]);

  // 处理触摸移动
  const handleTouchMove = useCallback((e) => {
    if (disabled || !touchStartRef.current) return;
    
    // 移动时取消长按
    clearLongPressTimer();
    
    const touch = e.touches[0];
    touchEndRef.current = {
      x: touch.clientX,
      y: touch.clientY,
      time: Date.now()
    };
  }, [disabled, clearLongPressTimer]);

  // 处理触摸结束
  const handleTouchEnd = useCallback((e) => {
    if (disabled) return;
    
    clearLongPressTimer();
    setIsPressed(false);
    
    if (!touchStartRef.current || !touchEndRef.current) {
      // 如果没有移动，视为点击
      if (onTap) {
        const now = Date.now();
        const timeDiff = now - lastTapRef.current;
        
        if (timeDiff < doubleTapDelay) {
          // 双击
          if (onDoubleTap) {
            onDoubleTap(e);
          }
          lastTapRef.current = 0;
        } else {
          // 单击
          onTap(e);
          lastTapRef.current = now;
        }
      }
      return;
    }
    
    const deltaX = touchEndRef.current.x - touchStartRef.current.x;
    const deltaY = touchEndRef.current.y - touchStartRef.current.y;
    const deltaTime = touchEndRef.current.time - touchStartRef.current.time;
    
    // 判断是否为有效滑动
    if (deltaTime < 300 && (Math.abs(deltaX) > swipeThreshold || Math.abs(deltaY) > swipeThreshold)) {
      const absDeltaX = Math.abs(deltaX);
      const absDeltaY = Math.abs(deltaY);
      
      if (absDeltaX > absDeltaY) {
        // 水平滑动
        if (deltaX > 0 && onSwipeRight) {
          onSwipeRight(e);
        } else if (deltaX < 0 && onSwipeLeft) {
          onSwipeLeft(e);
        }
      } else {
        // 垂直滑动
        if (deltaY > 0 && onSwipeDown) {
          onSwipeDown(e);
        } else if (deltaY < 0 && onSwipeUp) {
          onSwipeUp(e);
        }
      }
    }
    
    // 重置触摸状态
    touchStartRef.current = null;
    touchEndRef.current = null;
  }, [
    disabled,
    onTap,
    onDoubleTap,
    onSwipeLeft,
    onSwipeRight,
    onSwipeUp,
    onSwipeDown,
    swipeThreshold,
    doubleTapDelay,
    clearLongPressTimer
  ]);

  // 处理触摸取消
  const handleTouchCancel = useCallback(() => {
    clearLongPressTimer();
    setIsPressed(false);
    touchStartRef.current = null;
    touchEndRef.current = null;
  }, [clearLongPressTimer]);

  // 组件卸载时清理
  useEffect(() => {
    return () => {
      clearLongPressTimer();
    };
  }, [clearLongPressTimer]);

  return (
    <div
      ref={elementRef}
      className={`${isPressed ? 'pressed' : ''} ${className}`}
      onTouchStart={handleTouchStart}
      onTouchMove={handleTouchMove}
      onTouchEnd={handleTouchEnd}
      onTouchCancel={handleTouchCancel}
      {...props}
    >
      {children}
    </div>
  );
};

export default MobileTouch;
